﻿<!DOCTYPE html>
<html>
<head>
	<title>KendoUI Integration</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge;IE=11" />
	<script src="wisej.wx"></script>
	<style>
		#splash {
			position: absolute;
			background: url("Images/logo-wisej-white.png");
			background-position: center center;
			background-size: 175px 175px;
			background-repeat: no-repeat;
			background-color: #0B5DAB;
			width: 100%;
			height: 100%;
			overflow: hidden;
			opacity: 0;
			transition: opacity 2s;
		}

		#loading {
			color: white;
			font-family: Arial, Helvetica, sans-serif;
			font-weight: 300;
			font-size: 18px;
			letter-spacing: 5px;
			text-align: center;
			width: 250px;
			position: absolute;
			bottom: calc(16% + 30px);
			margin-left: 50%;
			left: -125px;
		}

		#loading-bar {
			background-color: #6095C7;
			width: 250px;
			height: 13px;
			margin-left: 50%;
			left: -125px;
			border-radius: 13px;
			position: absolute;
			bottom: 16%;
		}

		#loading-progress {
			background-color: #C4E5FF;
			height: 100%;
			border-radius: 13px;
			width: 10px;
			transition: width 3s, left 3s;
			position: absolute;
		}

		.dx-tile-content .image {
			height: 100%;
			width: 100%;
			background-position: center;
			background-size: cover;
			display: block;
		}
	</style>
</head>
<body style="padding: 0px; margin: 0px">
	<div id="splash">
		<div id="loading">LOADING</div>
		<div id="loading-bar">
			<div id="loading-progress"></div>
		</div>
	</div>
	<script>

		var splash = document.getElementById("splash");
		var loadingProgress = document.getElementById("loading-progress");
		splash.style.opacity = 1;
		setTimeout(function () {
			loadingProgress.style.width = "100%";
			loadingProgress.style.left = "0%";
			setTimeout(function () {
				loadingProgress.style.width = "0%";
				loadingProgress.style.left = "100%";
			}, 3000);
		}, 1);

		Wisej.onLoad = function () {
			var splash = document.getElementById("splash");
			if (splash != null)
				splash.parentNode.removeChild(splash);
		}
	</script>
</body>
</html>
